<style lang="scss" scoped>
.money_list {
  background-image: url(../../image/money_top.png);
  .tit {
    padding-top: 0.5rem;
    .tit-bg {
      width: 1.8rem;
      height: 0.28rem;
      color: red;
      background:  url(../../image/money_top1.png) center top / cover;
      margin: 0.25rem 0 .1rem;
    }
    p {
      padding-bottom: 0.45rem;
    }
  }

  .list {
    padding: 0 0.3rem;
    & > div {
      height: 3.75rem;
    }

    .rank {
      width: 1.3rem;
      height: 0.3rem;
      border: 1px solid #000000;
    }
    .info {
      width: 100%;
      overflow-y: auto;
    }
    table {
      width: 96%;
      margin-left: 2%;
      font-size: 0.13rem;
      thead {
        tr {
          height: 0.4rem;
          line-height: 0.4rem;
          border-bottom: 2px dashed #aaa;
        }
      }
      tbody {
        tr {
          height: 0.42rem;
          line-height: 0.42rem;
          border-bottom: 1px dashed #aaa;
          &:last-child {
            border-bottom: none;
          }
        }
      }
    }
  }
}
</style>


<template>
  <div class="money_list full img-bg">
    <div class="tit box-center">
      <div class="tit-bg box-center font-14">{{date}}份</div>
      <p class="cfff">智能屋销售员提佣业绩排行榜</p>
    </div>
    <div class="list">
      <div class="bgfff bor-r10 box-center flex-row">
        <!-- <div class="rank box-center margin-t15">暂无排名</div> -->
        <div class="info box1">
          <table class="text-c ">
            <thead>
              <tr>
                <th>排名</th>
                <th>姓名</th>
                <th>推荐成交数</th>
                <th>额外奖励</th>
                <th>所获佣金(元)</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(it,i) in list" :key="i">
                <td>
                  <i class="iconfont icon-shouji"></i>
                </td>
                <td>{{it.user_name}}</td>
                <td>{{it.numbers}}</td>
                <td>{{it.award}}元福利卡</td>
                <td>{{it.getMoney}}</td>
              </tr>
            </tbody>
          </table>
          <div class="padding-tb20 c82 box-center"  v-show="!list.length">暂无数据</div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "money_list",
  data() {
    return {
      date:null,
      list: []
    };
  },
  created() {
    this.date = this.toDate(new Date().getTime(),'yyyy年MM月');
    this.getList();
  },
  methods: {
    getList(has = false) {
      let that = that,
        limit = this.limit;
      let page = this.hasPage(has); //需要分页
      if (!page) return;
      this.http
        .get("commission/rank", {
          page,
          limit
        })
        .then(res => {
          if (has) {
          } else {
            that.list = res.data;
          }
        });
    }
  }
};
</script>